<template>
  <div>
    <div class="register_con">
      <div class="l_con fl">
        <a href="index.html" class="reg_logo"><img src="@static/images/logo.png"></a>
        <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
        <div class="reg_banner"></div>
      </div>

      <div class="r_con fr">
        <div class="reg_title clearfix">
          <h1>用户注册</h1>
          <a href="login.html">登录</a>
        </div>
        <div class="reg_form clearfix">
          <form method="post" class="register_form" @submit.prevent="reg">
            <ul>
              <li>
                <label>用户名:</label>
                <input type="text" name="user_name" id="user_name" v-model="form.username" @blur="checkusername">
                <span class="error_tip">{{error.username}}</span>
              </li>
              <li>
                <label>密码:</label>
                <input type="password" name="pwd" id="pwd" v-model="form.password" @blur="checkpassword">
                <span class="error_tip">{{error.password}}</span>
              </li>
              <li>
                <label>确认密码:</label>
                <input type="password" name="cpwd" id="cpwd" v-model="password1" @blur="checkpassword1">
                <span class="error_tip">{{ error.password1 }}</span>
              </li>
              <li>
                <label>手机号:</label>
                <input type="text" name="phone" id="phone" v-model="form.mobile" @blur="checkmobile">
                <span class="error_tip">{{ error.mobile }}</span>
              </li>
              <li>
                <label>图形验证码:</label>
                <input type="text" name="pic_code" id="pic_code" class="msg_input">
                <img src="@static/images/pic_code.jpg" alt="图形验证码" class="pic_code">
                <span class="error_tip">请填写图形验证码</span>
              </li>
              <li>
                <label>短信验证码:</label>
                <input type="text" name="msg_code" id="msg_code" class="msg_input" v-model="form.smscode">
<!--                <a href="javascript:;" class="get_msg_code">获取短信验证码</a>-->
                  <button @click.prevent="getSmsCode" :disabled="flag">{{mes}}</button>
                <span class="error_tip">请填写短信验证码</span>
              </li>
              <li class="agreement">
                <input type="checkbox" name="allow" id="allow" checked="checked">
                <label>同意”美多商城用户使用协议“</label>
                <span class="error_tip">请勾选用户协议</span>
              </li>
              <li class="reg_sub">
                <input type="submit" value="注 册">
              </li>
            </ul>
          </form>
        </div>

      </div>

    </div>

    <div class="footer no-mp">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
  </div>
  </div>
</template>

<script>
import '@static/css/reset.css'
import '@static/css/main.css'
export default {
  name: "Reg",
  data() {
    return {
      form:{},
      error:{username:'',password:'',password1:'',mobile:''},
      password1:'',
      flag:false,
      mes:'获取短信验证码',
      time:60
    }
  },
  methods: {
    checkusername(){
      let name = this.form.username
    //  1.检查是否为空undifined
      if (name == undefined){
        this.error.username='必须输入用户名'
        return false
      }else {
        this.error.username=''
      }
    //  2.格式是否正确
      let reg = /\w{5,10}$/
      if (!reg.test(name)){
        this.error.username='请输入正确的格式'
        return false
      }else {
        this.error.username=''
      }
    //  3. 唯一性验证
      this.axios.post('reg/',this.form)
      .then(res=>{
        console.log(res)
        if (res.data.code==10010){
          this.error.username='必须输入用户名'
        }
        if (res.data.code==10011){
          this.error.username='请输入正确格式'
        }
        if (res.data.code==10012){
          this.error.username='用户名已存在'
        }
        this.error.username='666'
      })

    },
    checkpassword(){
      let password = this.form.password
      //  1.检查是否为空undifined
      if (password == undefined){
        this.error.password='必须输入密码'
        return false
      }else {
        this.error.password=''
      }
      //  2.格式是否正确
      let reg = /\w{8,20}$/
      if (!reg.test(password)){
        this.error.password='请输入正确的密码格式'
        return false
      }else {
        this.error.password=''
      }
      //  3. 唯一性验证
      this.axios.post('reg/',this.form)
      .then(res=>{
        if (res.data.code==10013){
          this.error.password='必须输入密码'
        }
        console.log(res)
      })
    },
    checkpassword1(){
      let password1 = this.password1
      //  1.检查是否为空undifined
      if (password1 == undefined){
        this.error.username='必须输入第二次密码'
        return false
      }else {
        this.error.password1=''
      }
      //  2.格式是否正确
      let reg = /\w{8,20}$/
      if (!reg.test(password1)){
        this.error.password1='请输入正确的密码格式'
        return false
      }else {
        this.error.password1=''
      }
      if (this.form.password == password1){
        this.error.password1='牛'
        return true
      }
    },
  //  验证手机号
    checkmobile(){
      let mobile = this.form.mobile
      if (mobile == undefined){
        this.error.mobile = '请输入手机号'
        return false
      }else {
        this.error.mobile=''
      }
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(mobile)){
        this.error.mobile='请输入正确的格式'
      }else {
        this.error.mobile=''
      }
      this.axios.post('reg/',this.form)
      .then(res=>{
        console.log(res)
        if (res.data.code==10015){
          this.error.username='必须输入手机号'
        }
        if (res.data.code==10016){
          this.error.username='请输入正确格式'
        }
        if (res.data.code==10017){
          this.error.username='用户名已存在'
        }
      })

    },
    //获取手机验证码
    getSmsCode(){
    //  获取手机号
      this.axios.post('sendSms/',{'mobile':this.form.mobile})
      .then(res=>{
      //  成功后开始倒计时，把按钮变成disabled
        if (res.data.code == 200){
          let m = setInterval(()=>{
            //time-1
            this.time--
            //  按钮变为不能用
            this.flag=true
            //  文字发生变化
            this.mes=this.time+'秒以后在操作'
            if (this.time==0){
              clearInterval(m)
              this.time=60
              this.flag=false
              this.mes='获取短信验证码'
            }
          },1000)
        }
      })
    },
    //注册
    reg(){
      this.checkusername()
      this.checkpassword()
      this.checkpassword1()
      this.checkmobile()
      this.axios.post('reg/',this.form)
      .then(res=>{

      })
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
